<!DOCTYPE html>
<html>
    {% load static %}
<!-- import CSS -->
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
<!-- import Vue before Element -->
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<!-- import JavaScript -->
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>

<!-- Bootstrap core CSS -->
<link href="{% static 'assets/css/bootstrap.css' %}" rel="stylesheet">
<!--external css-->
<link href="{% static 'assets/font-awesome/css/font-awesome.css' %}" rel="stylesheet" />
    
<!-- Custom styles for this template -->
<link href="{% static 'assets/css/style.css' %}" rel="stylesheet">
<link href="{% static 'assets/css/style-responsive.css' %}" rel="stylesheet">

<!-- js placed at the end of the document so the pages load faster -->
<script src="{% static 'assets/js/jquery.js' %}"></script>
<script src="{% static 'assets/js/bootstrap.min.js' %}"></script>
<script class="include" type="text/javascript" src="{% static 'assets/js/jquery.dcjqaccordion.2.7.js' %}"></script>
<script src="{% static 'assets/js/jquery.scrollTo.min.js' %}"></script>
<script src="{% static 'assets/js/jquery.nicescroll.js' %}" type="text/javascript"></script>


<!--common script for all pages-->
<script src="{% static 'assets/js/common-scripts.js' %}"></script>

<!--script for this page-->

<!-- 引入刚刚下载的 ECharts 文件 -->
<script src="{% static 'assets/js/echarts.js' %}"></script>
<script src="{% static 'assets/js/highlight.min.js' %}"></script>
    <script>
        hljs.highlightAll();
    </script>

    <script src="{% static 'assets/dist/notice.min.js' %}"></script>
    <script>
        const notice = new Notice();
    </script>

    <script src="{% static 'assets/js/main.js' %}"></script>
    <link rel="stylesheet" href="{% static 'assets/css/style.css' %}">
    <link rel="stylesheet" href="{% static 'assets/dist/notice.min.css' %}">
    <link rel="stylesheet" href="{% static 'assets/css/default.min.css' %}">
    <link href="{% static 'assets/css/the-datepicker.css' %}" rel="stylesheet">

    <script>
       
    function re(){
        document.getElementById("fu").style.display="none";
                document.getElementById("yuan").style.display="";
    };
    function openInsertModal() {

        //弹出模态框
        
        $("#myModalcjz").modal("show")
        
        };
    </script>
    <body>
        <section id="main-content">
            <section class="wrapper">
                <h3><i class="fa fa-angle-right"></i> 查看商品收据
                </h3>
                <div class="row mt">
                  <div class="col-lg-12">
                  <div class="form-panel3">
                        
                      <form id='material1' class="form-horizontal style-form" method="get">
                          <!-- <div class="form-group"> -->
                              <!-- <label class="col-sm-2 col-sm-2 control-label">搜索</label> -->
                              <div class="col-sm-3">
                                <input class="form-control" type="text" placeholder="请输入收据编号" id="sjcode">
                              </div>
                              <div class="col-sm-3">
                                <input class="form-control" type="text" placeholder="请输入创建者编码" onclick="openInsertModal()" id="cjzcode">
                            </div>
                            <div class="col-sm-3">
                                <input class="form-control" type="text" id="my-input" placeholder="请输入创建日期">
                            </div>
                            <script src="{% static 'assets/js/the-datepicker.js' %}"></script>
                                    <script>
                                        (function () {
                                            const input = document.getElementById('my-input');
                                            const datepicker = new TheDatepicker.Datepicker(input);
                                            datepicker.render();
                                        })();
                                        (function () {
                                            const input = document.getElementById('my-input2');
                                            const datepicker = new TheDatepicker.Datepicker(input);
                                            datepicker.render();
                                        })();
                                    </script>
                              <button type="submit" formmethod="post" class="btn btn-success "><i class="fa fa-search"></i></button>
                            </form>
                              
                            <div class="col-sm-12">
                                <div class="modal fade" id="myModalcjz" tabindex="-1" role="dialog" aria-labelledby="myModalLabel1" aria-hidden="true">
                                    <div class="modal-dialog">
                                      <div class="modal-content">
                                        <div class="modal-header">
                                          <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                                          <h4 class="modal-title" id="myModalLabel">创建者编码</h4>
                                        </div>
                                        <div class="modal-body">
                                          
                                        <table  class="table table-bordered table-striped table-condensed">
                                            <thead>
                                                <!-- tr 指定表行标签-->
                                                <tr>
                                                    <!-- th 设置表头内容，默认加粗-->
                                                    <th style="width: 100px;">序号</th>
                                                    <th>创建者编码</th>
                                                </tr>
                                            </thead>
                                            <tbody id="cjzDiv">
                        
                                            </tbody>
                                        </table>
                        
                                        <script>   //不需要提交表单，点击input框加载modal直接列出创建者编码
                                            
                                                
                                            $('').on('', function(e) {
                                                e.preventDefault();
                                                $.ajax(
                                                {
                                                    type: 
                                                    url: 
                                                    data:{
                                                       
                                                    },
                                                    success: function() {
                                                      var i=0 //序号
                                                        for() {
                                                            i++
                                                            out += '<tr><td>'+ i + '</td><td>' + /* 创建者编码 */ +'</td><tr>';
                                                        }
                                                        document.getElementById("cjzDiv").innerHTML=out;
                                                    },
                                                    failure: function() {
                                
                                                    }
                                                })
                                            });
                                            $("table").on("dblclick","tr",function(e){
                                                
                                                document.getElementById("cjzcode").value=$(this).find('td').eq(0).text();
                                                $('#myModalcjz').modal('hide')
                                                
                                            })
                                            
                                        </script>
                                        
                                        </div>
                                        <div class="modal-footer">
                                        </div>
                                      </div>
                                    </div>
                                  </div>
                                </div>
                        <!--创建者编码modal-->
                        
              {% comment %} style="display: none;" {% endcomment %}
              <div  id='details'>  
                <div class="row mt">
                    <div class="col-md-12">
                      <div class="col-md-12">
                       
                      <div class="content-panel">
                          <!-- <div class="form-panel2"> -->
                          
                          <table class="table table-striped table-advance table-hover">
                                  <h4><i class="fa fa-angle-right"></i> 商品收据列表</h4>
                                  <hr>
                              <thead>
                                <tr>
                                    <th>发票编码</th>
                                    <th>财年</th>
                                    <th> 商品名称</th>
                                    <th> 数量</th>
                                    <th> 实收数量</th>
                                    <th> 总金额+货币</th>
                                    <th>查看详情</th>
                                
                                </tr>
                              </thead>
                              <tbody id="searchDiv"></tbody>
                          </table>
                      </div>
                      </div>
                       
                        </div>
                    </div><!-- /col-md-12 -->
                </div><!-- /row -->
  
          </section>
        </section><!-- /MAIN CONTENT -->
  
        <!--main content end-->
        <!--footer start-->
        <footer class="site-footer">
            <div class="text-center">
                2014 - Alvarez.is
                <a href="basic_table.html#" class="go-top">
                    <i class="fa fa-angle-up"></i>
                </a>
            </div>
        </footer>
        <!--footer end-->
    </section>

        {% comment %} <textarea id="item_result"></textarea> {% endcomment %}

        <script>
            //收据搜索 不限制三项内容是否填写默认返回全部
            $('#material1').on('submit', function(e) {
                e.preventDefault();
                $.ajax(
                {
                    type: "POST",
                    url: "{% url 'MM:ajax_search_invoice' %}",
                    data:{
                        dataType: "json",
                        csrfmiddlewaretoken: '{{ csrf_token }}',
                        //输入三个搜索框的值
                        uid: $("#cjzcode").val(),
                        pk: $("#sjcode").val(),
                        date: $("#my-input").val(),
                    },
                    success: function(data) {
                        $('#item_result').text(data);
                        var dataObj = eval("("+data+")");
                        
                        //console.log(dataObj.gr[0].pk);
                        
                        for(i = 0; i < dataObj.gr.length; i++) {
                           content2 =dataObj.gr[i].fields;
                           var out='';
                            out += '<tr><td id="itempk'+i+'">'+ dataObj.gr[i].pk+ '</td><td>' + content2.fiscal + '</td><td>' + dataObj.gr[i].material.mname + '</td><td>'+ dataObj.gr[i].orderItem.quantity+ '</td><td>'+ dataObj.gr[i].goodReceipt.actualQnty+ '</td><td>'+ content2.sumAmount + content2.currency +'</td><td><button class="btn btn-success btn-xs" onclick="submitpk(this.id)" id="bid'+i+'"><i class="fa fa-search-plus"></i></button></td></tr>';
                        }
                        document.getElementById("searchDiv").innerHTML=out;
                    },
                    failure: function() {

                    }
                })
            });
    
                    //点击按钮，收据编码给后端
                function submitpk(clicked_id){
                    var itempk='itempk'+clicked_id[6];
                    
                    var target="{% url 'MM:display_invoice' %}"+'?'+'itemID='+ '1'+'&'+'orderID='+'1';
                    window.location.href=target; 
                        window.location.href=target; 
                    
                }
                </script>


        <!-- 确认提示 -->
        <script>
            function tip(){
                if(confirm("您确认修改吗？")){
                return true;
                }
                else{
                return false;
                }
            } 
        </script>

    </body>
</html>